<!DOCTYPE html>
<html>
<head>
    <title>我的收藏</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name=""/>
    <link href="../images/favicon.ico" rel="shortcut icon">
    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="../css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" type="text/css" href="../css/zoomslider.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link href="../css/font-awesome.css" rel="stylesheet">
    <style>
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #555;
        }
    </style>


    <!--//web-fonts-->
</head>
<body>
<!--/main-header-->
<!--/banner-section-->
<div id="demo-1" class="banner-inner">
    <div class="banner-inner-dott">
        <!--/header-w3l-->
        <div class="header-w3-agileits" id="home">
            <div class="inner-header-agile part2">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <h1><a href="/"><span>M</span>ovies <span>P</span>ro</a></h1>
                    </div>
                    <div class="clearfix"></div>
                </nav>

            </div>

        </div>

    </div>
</div>


<div class="w3_content_agilleinfo_inner">
    <div class="agile_featured_movies">
        <h3 class="agile_w3_title" id="allVideo" style="font-size: 1em;">
            <text id="totalRows"></text>
        </h3>
        <div class="wthree_agile-requested-movies" id="videoList" style="font-size: 12px;">
        </div>
    </div>
</div>

<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover"
                                                                         style="opacity: 1;"> </span></a>
<script src="../js/config.js"></script>
<script type="text/javascript" src="../js/modernizr-2.6.2.min.js"></script>
<script src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.zoomslider.min.js"></script>
<script src="../js/main.js"></script>
<script src="../js/simplePlayer.js"></script>
<script src="../js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="../js/easy-responsive-tabs.js"></script>
<link href="../css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<script src="../js/owl.carousel.js"></script>
<script type="text/javascript" src="../js/move-top.js"></script>
<script type="text/javascript" src="../js/easing.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/doT.js" type="text/javascript"></script>
<script id="videoListTemplate" type="text/x-dot-template">
    {{ for(var index in it.item) { }}
    <div class="col-md-2 w3l-movie-gride-agile requested-movies">
        <a href="../video.html?id={{=it.item[index].id}}" class="hvr-sweep-to-bottom" target="_blank">
            <img src="{{=it.item[index].coverImage}}" title="{{=it.item[index].title}}" class="img-responsive" alt=" ">
            <div class="w3l-action-icon"><i class="fa fa-play-circle-o" aria-hidden="true"></i></div>
        </a>
        <div class="mid-1 agileits_w3layouts_mid_1_home">
            <div class="w3l-movie-text">
                <h7>
                    <a href="../video.html?id={{=it.item[index].id}}" target="_blank" title="{{=it.item[index].title}}"
                       style="text-decoration:none;color: black;">
                        <b>{{=it.item[index].shortTitle}}</b>
                    </a>
                </h7>
            </div>
            <div class="mid-2 agile_mid_2_home">
                <p>{{=it.item[index].author}}</p>
                <div class="clearfix"></div>
                <p>{{=it.item[index].createdAt}}</p>
                <div class="clearfix"></div>
                <p>浏览：{{=it.item[index].viewNumber}}</p>
                <div class="clearfix"></div>
                <p><a href="javascript:void(0);" style="font-size: 12px;font-family: '微软雅黑';color: red;"
                      onclick="video.uncollect('{{=it.item[index].id}}');">删除</a></p>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    {{ } }}
    <div class="clearfix"></div>
    <div class="blog-pagenat-wthree">
        <ul class="pagination">
            <li><a href="javascript:void(0);" onclick="video.loadVideoList('1')">&laquo;</a></li>
            {{ for(var p in it.pageArray) { }}


            {{? it.currentPage == it.pageArray[p] }}
            <li class="active"><a href="javascript:void(0);" onclick="video.loadVideoList('{{=it.pageArray[p]}}')">{{=it.pageArray[p]}}</a>
            </li>
            {{??}}
            <li><a href="javascript:void(0);"
                   onclick="video.loadVideoList('{{=it.pageArray[p]}}')">{{=it.pageArray[p]}}</a></li>
            {{?}}

            {{}}}
            <!--末页-->
            <li><a href="javascript:void(0);" onclick="video.loadVideoList('{{=it.totalPage}}')">&raquo;</a></li>
            <li><span style="border:0px;color: black;">跳转到：<input type="number" min="1" style="width: 80px;"
                                                                  id="gotopage"></span></li>
            <li><a href="javascript:void(0);">总共{{=it.total}}条，{{=it.totalPage}}页</a></li>

        </ul>

    </div>
</script>
<script>
    function colseLoading() {
        $('#loadWaiting').modal('hide');
    }

    function loading() {
        $('#loadWaiting').modal({backdrop: 'static', keyboard: false});
    }

    function scrollIntoViewTo(eId) {
        document.getElementById(eId).scrollIntoView(true);
        return false;
    }

    function openLoginForm() {
        $('#loginForm').modal({backdrop: 'static', keyboard: false});
    }

    var video = {

        pageSize: 50,

        totalShowPageNumber: 8,


        get_hs_page: function (ThisPage, pageNumber) {
            var pageArray = new Array();
            var countPage;
            //page分割数量
            var pageFor = video.totalShowPageNumber;
            var pageSlipt = pageFor / 2;
            //总页数大于显示的页数
            if (pageNumber > pageFor) {
                if (ThisPage > pageSlipt) {	//如果当前页大于分割数量的一半就开始分页
                    if (ThisPage >= (pageNumber - pageSlipt)) {	//如果当前页大于等于总页数减去分割数量的一半
                        if (ThisPage == pageNumber) {		//如果当前页等于总页数不在往后加页数
                            countPage = (((ThisPage - pageSlipt) + pageFor) - pageSlipt);
                        } else {
                            countPage = (((ThisPage - pageSlipt) + pageFor) - pageSlipt + 1);
                        }
                    } else {
                        countPage = ((ThisPage - pageSlipt) + pageFor);
                    }

                    for (i = (ThisPage - pageSlipt); i <= countPage; i++) {
                        pageArray.push(i)
                    }
                } else {
                    for (i = 1; i < pageFor; i++) {
                        pageArray.push(i)
                    }
                }
            } else {		//原始的那种分页
                for (i = 1; i <= pageNumber; i++) {
                    pageArray.push(i)
                }
            }

            return pageArray;
        },
        uncollect: function (id) {
            var path = commons.routPath + "/video/" + id + "/uncollect";
            $.post(path, {}, function (res) {
                if (res.meta.code == '200') {
                    video.loadVideoList(1);
                }
            })
        },

        loadVideoList: function (page) {

            $.ajax({
                type: "get",
                url: commons.routPath + "/video/collect/" + video.pageSize + "/" + page,
                async: true,
                dataType: 'json',
                beforeSend: function () {
                    loading();
                },
                success: function (data) {
                    scrollIntoViewTo('allVideo')
                    colseLoading();
                    if (data.meta.code === '200') {
                        var tmpl = doT.template($("#videoListTemplate").text());
                        // 将数据扔进templ中。并在DIV中显示出来
                        var datas = data.body;
                        $("#totalRows").html("您共有" + datas.total + "条收藏视频");
                        var totalPage = Math.ceil(datas.total / video.pageSize);

                        var pageArray = video.get_hs_page(page, totalPage)
                        datas.currentPage = page;
                        datas.pageArray = pageArray;
                        datas.totalPage = totalPage;

                        $("#videoList").html(tmpl(datas));
                        var div = $(".agileits_w3layouts_mid_1_home").first()
                        var imgWd = div.width();
                        var height = imgWd * 0.75;
                        $(".img-responsive").width(imgWd);
                        $(".img-responsive").height(height);

                        $('#gotopage').bind('keyup', function (event) {
                            if (event.keyCode == "13") {
                                var page = $('#gotopage').val();
                                if (page) {
                                    video.loadVideoList(page);
                                }
                            }
                        });
                    } else {
                        if (data.meta.message === 'unLogin') {
                            openLoginForm();
                        } else {
                            //跳转到首页
                            location.href = "/";
                        }
                    }
                }
            });
        }
    }


    var user = {


        login: function () {
            var loginId = $("#loginId").val();
            var password = $("#password").val();
            //开始登录
            var action = commons.routPath + "/auth/login";
            $.ajax({
                type: "post",
                url: action,
                async: true,
                data: {loginId: loginId, password: password},
                dataType: 'json',
                success: function (response) {
                    if (response.meta.code == '200') {
                        //关闭登录模态框
                        $('#loginForm').modal('hide');
                        //重新加载收藏视频
                        video.loadVideoList(1);
                    }
                }
            });
        }
    }


    $(function () {
        video.loadVideoList(1);
        $(document).ready(function () {
            $(".dropdown").hover(
                function () {
                    $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                    $(this).toggleClass('open');
                },
                function () {
                    $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                    $(this).toggleClass('open');
                }
            );
        });

    });
</script>


<div class="modal fade" id="loadWaiting">
    <div class="modal-dialog modal-sm" style="text-align: center;vertical-align: middle;">
        <img alt=""
             src=""/>
    </div>
</div>


<!--登录模态框-->
<div class="modal fade" id="loginForm" tabindex="-1" role="dialog" style="font-size: 12px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4>登录</h4>
                <div class="login-form">
                    <input type="text" name="loginId" id="loginId" placeholder="账号" required>
                    <input type="password" name="password" id="password" placeholder="密码" required>
                    <span style="text-align: center;color: red;" id="loginMessage"></span>
                    <div class="tp">
                        <input type="submit" value="登录" onclick="user.login();">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>